<template>
  <v-data-table
    v-model="selected"
    :single-select="singleselect"
    :headers="headers"
    :items="desserts"
    sort-by="calories"
    class="elevation-1"
    item-key="id"
    show-select
  >
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>测试用例</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px">
          <template v-slot:activator="{ on, attrs }">
            <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
              新增用例
            </v-btn>
            <v-btn color="green" dark class="mb-3" @click="executeTestcase()"> 执行用例 </v-btn>
          </template>
          <v-card>
                      
            <v-card-title>
              <span class="text-h5">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field
                      v-model="editedItem.id"
                      label="用例ID"
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field
                      v-model="editedItem.node_id"
                      label="node_id"
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field
                      v-model="editedItem.remark"
                      label="备注"
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
              <v-btn color="blue darken-1" text @click="save"> 确定 </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <v-dialog v-model="dialogDelete" max-width="500px">
          <v-card>
            <v-card-title class="text-h5">您确定要删除此用例吗?</v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="closeDelete"
                >取消</v-btn
              >
              <v-btn color="blue darken-1" text @click="deleteItemConfirm"
                >确定</v-btn
              >
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
      <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize"> Reset </v-btn>
    </template>
  </v-data-table>
</template>
<script>
export default {
  data: () => ({
    singleselect:false,
    selected:[],
    dialog: false,
    dialogDelete: false,
    headers: [
      {
        text: "用例ID",
        align: "start",
        sortable: false,
        value: "id",
      },
      { text: "nodeID", value: "node_id" },
      { text: "备注", value: "remark" },
      { text: "编辑", value: "actions", sortable: false },
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      id: "",
      node_id: 0,
      remark: 0,
    },
    defaultItem: {
      id: "",
      node_id: 0,
      remark: 0,
    },
  }),

  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "新增用例" : "编辑用例";
    },
  },

  watch: {
    dialog(val) {
      val || this.close();
    },
    dialogDelete(val) {
      val || this.closeDelete();
    },
  },

  created() {
    this.initialize();
  },

  methods: {
    // 执行测试用例的方法
    executeTestcase(){
      console.log("执行用例",this.selected)
      this.$api.task.executeTask(this.selected).then((result) => {
        console.log("执行用例 succeed",result)
      }).catch((err) => {
        console.log("执行用例 error:",err)
      });
    },

    initialize() {
      this.$api.testcase.getTestcase().then((result) => {
         // this.desserts中的数据就页面展示信息，所以只需要跟换列表中的数据即可
        this.desserts = result.data;
        console.log("接口返回数据为",result.data)
      }).catch((err) => {
        "接口请求异常",err
      });
    },

    editItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },

    deleteItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialogDelete = true;
    },

    deleteItemConfirm() {
      // this.desserts.splice(this.editedIndex, 1);
      console.log("editedItem",this.editedItem)
      let caseID = this.editedItem.id
      console.log("caseID",caseID)
      this.$api.testcase.deleteTestcase({"id":caseID}).then((result) => {
        console.log("result",result)
        if (result.data.err_code==="0000"){
          // 刷新页面
          this.initialize()
        }else{
          console.log("用例删除失败1")
        }
      }).catch((err) => {
        console.log("用例删除失败",err)
      });
      this.closeDelete();
    },

    close() {
      this.dialog = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    closeDelete() {
      this.dialogDelete = false;
      console.log("closeDeletecloseDelete")
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    save() {
      if (this.editedIndex > -1) {
        console.log("编辑用例----------：",this.editedItem)
        console.log("编辑用例2----------：",this.editedItem)
        // 调用更新用例的方法
        this.$api.testcase.updateTestcase(this.editedItem).then((result) => {
          console.log("调用更新用例的方法：",result)
          if (result.data.err_code="0000"){
            // 刷新页面
            this.initialize()
          }else{
            console.log("更新用例失败")
          }
        }).catch((err) => {
          console.log("用例更新失败：",this.err)
        });
      } else {
        console.log("新增用例")
        console.log('新增用例的数据:',this.editedItem)
        // 调用新增用例接口
        this.$api.testcase.addTestcase(this.editedItem).then((result) => {
          console.log("新增用例的接口返回：",result)
           if (result.data.err_code==="0000"){
        // 刷新页面
        this.initialize()
      } else{
        console.log("数据添加失败")
      }
        }).catch((err) => {
          console.log("新增用例的接口异常：",err)
        });
      }
      this.close();
    },
  },
};
</script>